<template>

  <el-card class="box-card">
    <div id="main" style="width: 100%; height: 600px"></div>
</el-card>
</template>

<script>
import * as echarts from "echarts";
import _ from "lodash";
export default {
  name: "MyVueReports",

  data() {
    return {
      option: {
        xAxis: [{ boundaryGap: false }],
        yAxis: [{ axisLine: { show: true } }],
        tooltip: {
          axisPointer: {
            type: "cross",
            },
        },
     
      },
    };
  },

  mounted() {
    // 获取容器初始化
    let main = document.querySelector("#main");
    var myChart = echarts.init(main);
    this.$http.get(`reports/type/1`).then((res) => {
      let option = _.merge(this.option, res.data.data);
      console.log(option);
      myChart.setOption(option);
    });
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>